<link href="<?php echo Yii::app()->request->baseUrl; ?>/css/slider2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/slider2.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true,
				continuous: true 
			});
		});	
	</script>
<script type="text/javascript">
function item_masonry(){ 
	$('.item img').load(function(){ 
		$('.infinite_scroll').masonry({ 
			itemSelector: '.masonry_brick',
			columnWidth:232,
			gutterWidth:15								
		});		
	});
		
	$('.infinite_scroll').masonry({ 
		itemSelector: '.masonry_brick',
		columnWidth:232,
		gutterWidth:15								
	});	
	
}

$(function(){

	function item_callback(){ 
		
		$('.item').mouseover(function(){
			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
			$('.btns',this).show();
		}).mouseout(function(){
			$(this).css('box-shadow', '0 1px 3px rgba(0,0,0,0)');
			$('.btns',this).hide();		 	
		});
		
		item_masonry();	

	}

	item_callback();  

	$('.item').fadeIn();

	var sp = 1
	
	$(".infinite_scroll").infinitescroll({
		navSelector  	: "#more",
		nextSelector 	: "#more a",
		itemSelector 	: ".item",
		
		loading:{
			img: "images/masonry_loading_1.gif",
			msgText: ' ',
			finishedMsg: '木有了',
			finished: function(){
				sp++;
				if(sp>=10){ //到第10页结束事件
					$("#more").remove();
					$("#infscr-loading").hide();
					$("#page").show();
					$(window).unbind('.infscr');
				}
			}	
		},errorCallback:function(){ 
			$("#page").show();
		}
		
	},function(newElements){
		var $newElems = $(newElements);
		$('.infinite_scroll').masonry('appended', $newElems, false);
		$newElems.fadeIn();
		item_callback();
		return;
	});

});
</script>
<script type="text/javascript">
$(function(){
	$("img[original]").lazyload({ placeholder:"images/color3.gif" });
});

//部分区域图片延迟加载
function lazyloadForPart(container) {
    container.find('img').each(function () {
        var original = $(this).attr("original");
        if (original) {
            $(this).attr('src', original).removeAttr('original');
        }
    });
}
function setContentTab(name, curr, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var cont = document.getElementById("con_" + name + "_" + i);
        menu.className = i == curr ? "current" : "";
        if (i == curr) {
            cont.style.display = "block";
            lazyloadForPart($(cont));
        } else {
            cont.style.display = "none";
        }
    }
}
</script> 
<script type="text/javascript">
$(document).ready(function() {
	
	// 图片上下滚动
	var count = $("#imageMenu li").length - 3; /* 显示 4 个 li标签内容 */
	var interval = $("#imageMenu li:first").height();
	var curIndex = 0;
	
	$('.scrollbutton').click(function(){
		if( $(this).hasClass('disabled') ) return false;
		
		if ($(this).hasClass('smallImgUp')) --curIndex;
		else ++curIndex;
		
		$('.scrollbutton').removeClass('disabled');
		if (curIndex == 0) $('.smallImgUp').addClass('disabled');
		if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
		
		$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
	});
	
	// 解决 ie6 select框 问题
	$.fn.decorateIframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //创建一个IFRAME
                var divIframe = $("<iframe />");
                divIframe.attr("id", opts.iframeId);
                divIframe.css("position", "absolute");
                divIframe.css("display", "none");
                divIframe.css("display", "block");
                divIframe.css("z-index", opts.iframeZIndex);
                divIframe.css("border");
                divIframe.css("top", "0");
                divIframe.css("left", "0");
                if (opts.width == 0) {
                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                divIframe.css("filter", "mask(color=#fff)");
                $myThis.append(divIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId: "decorateIframe1",
        iframeZIndex: -1,
        width: 0,
        height: 0
    }
    //放大镜视窗
    $("#bigView").decorateIframe();

    //点击到中图
    var midChangeHandler = null;
	
    $("#imageMenu li img").bind("click", function(){
		if ($(this).attr("id") != "onlickImg") {
			midChange($(this).attr("src").replace("small", "mid"));
			$("#imageMenu li").removeAttr("id");
			$(this).parent().attr("id", "onlickImg");
		}
	}).bind("mouseover", function(){
		if ($(this).attr("id") != "onlickImg") {
			window.clearTimeout(midChangeHandler);
			midChange($(this).attr("src").replace("small", "mid"));
			$(this).css({ "border": "1px solid #990000" });
		}
	}).bind("mouseout", function(){
		if($(this).attr("id") != "onlickImg"){
			$(this).removeAttr("style");
			midChangeHandler = window.setTimeout(function(){
				midChange($("#onlickImg img").attr("src").replace("small", "mid"));
			}, 1000);
		}
	});

    function midChange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeViewImg();
        });
    }

    //大视窗看图
    function mouseover(e) {
        if ($("#winSelector").css("display") == "none") {
            $("#winSelector,#bigView").show();
        }

        $("#winSelector").css(fixedPosition(e));
        e.stopPropagation();
    }


    function mouseOut(e) {
        if ($("#winSelector").css("display") != "none") {
            $("#winSelector,#bigView").hide();
        }
        e.stopPropagation();
    }


    $("#midimg").mouseover(mouseover); //中图事件
    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

    var $divWidth = $("#winSelector").width(); //选择器宽度
    var $divHeight = $("#winSelector").height(); //选择器高度
    var $imgWidth = $("#midimg").width(); //中图宽度
    var $imgHeight = $("#midimg").height(); //中图高度
    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

    function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }

    changeViewImg();

    $("#bigView").scrollLeft(0).scrollTop(0);
    function fixedPosition(e) {
        if (e == null) {
            return;
        }
        var $imgLeft = $("#midimg").offset().left; //中图左边距
        var $imgTop = $("#midimg").offset().top; //中图上边距
        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

        if ($viewImgWidth == null) {
            $viewImgWidth = $("#bigView img").outerWidth();
            $viewImgHeight = $("#bigView img").height();
            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                $viewImgWidth = $viewImgHeight = 800;
            }
            $height = $divHeight * $viewImgHeight / $imgHeight;
            $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
            $("#bigView").height($height);
        }

        var scrollX = X * $viewImgWidth / $imgWidth;
        var scrollY = Y * $viewImgHeight / $imgHeight;
        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        $("#bigView").css({ "top": 360, "left": $(".product_pic").offset().left + $(".product_pic").width() + 15 });

        return { left: X, top: Y };
    }

});
</script>

<div class="main mid">
   <div class="main_brand">
      <div id="slider" class="mid">
         <?php require_once '_links.php';?>
      </div>
   </div>
</div>
<div class="main_nav mid">
      <div class="brand_logo"><img alt="" src="upload/brand_title.jpg" /></div>
      <ul class="brand_im">
         <li class="brand_imtxt">品牌客服：</li>
      <li>
      <img  style="CURSOR: pointer" onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=223265991&o=100me.cn&q=7', '_blank', 'height=502, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');"  border="0" SRC=http://wpa.qq.com/pa?p=1:223265991:1 alt="点击这里给我发消息"></li>
      <li><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E5%AE%A2%E6%9C%8D&siteid=cntaobao&status=1&charset=utf-8"><img border="0" src="http://amos.alicdn.com/realonline.aw?v=2&uid=%E5%AE%A2%E6%9C%8D&site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" /></a>
      </li>
      </ul>
      <div class="brand_nav"><a href="index.php">百觅首页</a> > <a href="#">美妆</a> > <a href="#">佰草集品牌专区</a> &gt; <?php echo $model->ProductName; ?></div>
</div>
  <div class="main mid">
    <div class="main_product blank">
       <div class="product_pic">
		<div class="smallImg">
			<div class="scrollbutton smallImgUp disabled"></div>
			<div id="imageMenu">
				<ul>
					<li id="onlickImg"><img src="<?php echo Yii::app()->request->baseUrl; ?>/admin/pic.php?imagename=../uploadfile/product_b/<?=$model->Photos?>&imagewidth=400&imageheight=400&cuteit=0" width="68" height="68" alt="<?php echo $model->ProductName; ?>"/></li>
					<li><img src="<?php echo Yii::app()->request->baseUrl; ?>/admin/pic.php?imagename=../uploadfile/product_b/<?=$model->Photos?>&imagewidth=400&imageheight=400&cuteit=0" width="68" height="68" alt="<?php echo $model->ProductName; ?>"/></li>
					<li><img src="<?php echo Yii::app()->request->baseUrl; ?>/admin/pic.php?imagename=../uploadfile/product_b/<?=$model->Photos?>&imagewidth=400&imageheight=400&cuteit=0" width="68" height="68" alt="<?php echo $model->ProductName; ?>"/></li>
					
				</ul>
			</div>
			<div class="scrollbutton smallImgDown"></div>
		</div><!--smallImg end-->
		<div id="vertical" class="bigImg">
			<img src='uploadfile/product_b/<?=$model->Photos?>' id="midimg"  width=400 hieght=400 border=0>
			
			<div style="display:none;" id="winSelector"></div>
		</div><!--bigImg end-->
		
		<div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>
       </div>
       <div class="product_function">
       <?php $dataa = date('Y-m-d',$model->ValidDate);?>
          <h1><?php echo $model->ProductName; ?></h1>
          <hr />
          <div class="product_price">
          <span class="default">原价：</span> <span class="yuan">￥1800</span><br />
          <span class="default">现价：</span> <span class="default_xj"><?php echo $nowPrice; ?></span> <span>元=</span> <span class="ding">定金<?php echo $model->DingJin; ?>元</span> <span>+</span> <span><strong>尾款<?php echo $weikuang; ?>元</strong></span><br />
          </div>
          <div class="product_sales">
             <div class="title">预售剩余时间:<span>
             <?php require_once 'daojishi.php';?>
             
             </span></div>
             
        <div class="sale3">
           <ul>
              <?php if($orderNum > 0 && $orderNum < 6){ ?>
              <li id="sale3_now">
                 <div class="sale3_number"><?php echo $orderNum;?>人已预订</div>
                 <div id="now_w" class="sale3_money" >现价￥ <?php echo $model->Price; ?></div>
              </li>
              <?php }else{ ?>
               <li id="sale3_past">
                 <div class="sale3_number"><?php echo $model->Ren;?>人</div>
                 <div class="sale3_money" >￥ <?php echo $model->Price; ?></div>
              </li>
              <?php } ?>
              
              <?php if($orderNum > 5 && $orderNum < 11){ ?>
              <li id="sale3_now">
                 <div class="sale3_number"><?php echo $orderNum;?>人已预订</div>
                 <div id="now_w" class="sale3_money">现价￥  <?php echo $model->Price2; ?></div>
              </li>
              <?php }else{ ?>
                 <li id="sale3<?php if($nowPrice < $model->Price2 ) echo '_past';  ?>">
                 <div class="sale3_number"><?php echo $model->Ren2;?></div>
                 <div  class="sale3_money">￥  <?php echo $model->Price2; ?></div>
              </li>
              <?php } ?>
              
              <?php if($orderNum > 10){ ?>
              <li id="sale3_now">
                 <div class="sale3_number"><?php echo $orderNum;?>人已预订</div>
                 <div  id="now_w" class="sale3_money">现价￥ <?php echo $model->Price3; ?></div>
              </li>
              <?php }else{ ?>
              <li id="sale3">
                 <div class="sale3_number"><?php echo $model->Ren3;?>人</div>
                 <div class="sale3_money">￥ <?php echo $model->Price3; ?></div>
              </li>
              <?php }?>
              
              <li id="right_border"></li>
           </ul>
        </div>
        
        
          </div>
          <div class="product_parameter">
          <ul class="product_guige">
          <li><span class="default">规格：</span></li>
          <li><span id="guige_select" class="guige">标准</span></li>
          </ul>
          <div class="product_num">
          <span class="default">数量：</span> 
          <span>
			  <input class="num_jj" type="button" name="jian" onclick="aprice(1)" value="-" />
			  <input class="num_input" name="num" id="num" type="text" size="10"  value="1" />
			  <input class="num_jj" type="button" name="add" onclick="aprice(2)" value="+" />
          </span>
<script language="javascript">

 function aprice(a){
      if(a == 1){
	    var oldval = $("#num").val();
		var nowval = parseInt(oldval)-1;
		$("#num").val(nowval);
	  }
      else  if(a == 2){
	    var oldval = $("#num").val();
		
		var nowval = parseInt(oldval)+1;
		
		$("#num").val(nowval);
	  }
  }
  
</script>          </div>
          <span class="default">库存：</span> <span>充足</span> 
          </div>
          <div class="sale3_btn">
      <script type="text/javascript">
         function pay(){
          var a = $('#num').val();
			  location.href="index.php?r=site/pay&id=<?php echo $_GET['id'];?>&num="+a;
             }
      </script>

    <a href="javascript:;" onclick="pay();"><img src="images/zhifubtn1.jpg"/> </a>

          </div>
          <div class="share blank">
          <div class="like">喜欢 <span>(200)</span></div>

          <!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_b">
<img src="http://bdimg.share.baidu.com/static/images/type-button-1.jpg?cdnversion=20120831" />
<a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=button&amp;uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
<!-- Baidu Button END -->
</div>
       </div>
    </div>
   </div>
   <div class="main_nav mid">
    <ul id="product_nav" class="product_tab">
       <li class="current">商品详情</li>
       <li>售后服务</li>
       <li>用户口碑</li>
    </ul>
    <div class="product_info">
      <p><strong>商品信息：</strong> </p>
      <?php echo $model->Note; ?>
		
    </div><img alt="" src="images/di.jpg" />
   </div>